<!DOCTYPE html>
<!-- @projectDescription Used to design the ui of MUN conference window -->
<!-- MUNS copyright, 2010 @author xkx-->
<html class="_back">
	<head>
		<title>Model United Nations Secretary</title>
		<meta charset="utf-8">
		<link rel="icon" type="image/png" href="United_Nations.png">
		
		<link rel="stylesheet" href="core.css" />
		<link rel="stylesheet" href="libs/Autocompleter.css" />
		<link rel="stylesheet" href="libs/uvumi-dropdown.css" />
		
		<script src="libs/mootools-1.3-core.js"></script>
		<script src="libs/mootools-1.3-more.js"></script>
		<script src="muns.js"></script>
		<script src="rollcall.js"></script>
		<script src="libs/UvumiDropdown.js"></script>
		<script src="libs/Autocompleter.js"></script>
		<script src="modules.js"></script>
		<script src="main.js"></script>
	</head>
	<body>
		<h1 class="_title">Model United Nations Secretary</h1>
		<div id="nav"><ul id="dropdown-menu" class="dropdown">
			<li>
				<a href="#" id="langmenu">English</a><ul id="lang">
						<li><a href="#" id="english">English</a></li>
						<li><a href="#" id="chinese">Chinese</a></li>
				</ul>
			</li>
			<li><a href="#" id="about">About</a></li>
			</ul>
		</div><hr/>
		<table id="content" style="width:100%;margin:2px 2px 2px 2px;border-spacing:10px 10px;">
			<tr>
			<td id="conference-name" colspan="2" class="_heading">XXX ModelUN Conference</td>
			<td id="info" rowspan="4" style="width:12em;vertical-align:top;"><form>
				<fieldset>
					<legend>Session Time</legend>
					<input type="text" readonly="readonly" size="2.5" id="session-time" class="_time" />
				</fieldset>
				<fieldset>
					<legend>Speaking Time</legend>
					<input type="text" readonly="readonly" size="2.5" id="speaking-time" class="_time" />
				</fieldset>
				<fieldset>
					<legend>Delegates Info</legend>
					<div style="color:white;text-align:left;" id="main-status-area">
						<span class="_info-name">Present:</span><span class="present-num"></span><br/>
						<span class="_info-name">Absent:</span><span class="absent-num"></span><br/>
						<span class="_info-name">Reach quorum:</span><span class="is-reachq"></span><br/>
						<span class="_info-name">20%:</span><span class="n20"></span><br/>
						<span class="_info-name">50%+1:</span><span class="n50"></span><br/>
						<span class="_info-name">2/3:</span><span class="n66"></span><br/>
					</div>
				</fieldset>
				<fieldset>
					<legend>Conference Info</legend>
						<div style="color:white;text-align:left;">
							<span class="_info-name">Session No:</span><span id="session-no"></span><br/>
							<span class="_info-name">Topic:</span><span id="topic-word"></span><br/>
							<span class="_info-name">Committee:</span><span id="committee-word"></span><br/>
							<span class="_info-name">Conference:</span><span id="conference-word"></span><br/>
						</div>
				</fieldset>
			</form><hr/>
			<div id="mun-copyright" class="_foot"></div>
			</td>
			</tr>
			<tr>
				<td style="padding-right:5px;"><div class="_label">Speakers' List</div></td>
				<td><div class="_label">Board</div></td>
			</tr>
			<tr>
				<td id="speakers-list" style="width:16em;padding-right:5px;">
					<div class="_list-area">
						<div id="list" style="overflow-y:scroll;" class="_list">
							<table border="1"></table>
						</div>
						<form id="add-s-nation-form"><table>
							<tr>
								<td><input type="text" class="_input" autocomplete="off" id="add-s-nation"/></td>
								<td><img id="add-s-button" src="img/silk/add.png" style="margin-left:3px"/></td>
							</tr>
						</table></form>
                    </div>
				</td>
				<td class="_board-area">
					<div>
						<div id="board" style="width:100%;overflow-y:auto;"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td style="position:absolute;bottom:2px;margin-top:5px;">
				<form id="add-p-nation-form"><table>
					<tr>
						<td><input type="text" class="_input" autocomplete="off" id="add-p-nation"/></td>
						<td><img id="add-p-button" src="img/silk/add.png" style="margin-left:3px"/></td>
					</tr>
				</table></form>
				</td>
				<td class="_tool" id="tool"></td>
			</tr>
		</table>
		<div style="visibility:hidden;" id="rollcall-area">
			<table border="1">
				<tr>
					<td><div id ="nations-area" style="height:20em;overflow-x:hidden;overflow-y:scroll">
						<table border="1" id="nations-table" style="font-size:20px;text-align:left;">
						</table>
					</div></td>
					<td style="width:20em;vertical-align:middle;">
					<div id="message" class="triangle-isosceles">
						<div style="text-align:center">
							<img id="lastnimg" class="p"/><span id="lastnname"></span> is <span id="lasttf"></span>
						</div>
						<div style="text-align:right">
							<button id="cancellast">cancel</button>
							<button id="recall">reRoleCall</button>
						</div>
					</div>
						<br/>
						<p style="text-align:center">
							<img id="nationimg" width="48" height="48"/>
						</p><h1 id="nationname" class="nationname"></h1>
						<br/>
						<div id="rollcall-buttons" style="text-align:center">
							<button id="present">present</button>
							<button id="absent">absent</button>
						</div>
						<hr/>
						<div id="rollcall-status-area">
							<span>Present:</span><span class="present-num"></span><br/>
							<span>Absent:</span><span class="absent-num"></span><br/>
							<span>Reach quorum:</span><span class="is-reachq"></span><br/>
							<span>20%:</span><span class="n20"></span><br/>
							<span>50%+1:</span><span class="n50"></span><br/>
							<span>2/3:</span><span class="n66"></span><br/>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
